import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import axios from 'axios';
import BASE_URL_HOST from '../util/base.js';

const registApi = `${BASE_URL_HOST}/api/register`


const Register = () => {
    const onFinish = async (values) => {
        try {
            console.log('Received values:', values);

            // 准备要提交的数据，这里假设values对象就是我们需要的所有数据
            const formData = values;

            // 调用后端接口，替换此处URL为你实际的注册接口地址
            const response = await axios.post(registApi, formData);

            // 检查响应状态
            if (response.status === 200) {
                // 处理成功响应，比如显示成功的提示信息或跳转页面
                alert('注册成功');
                // 或者
                // history.push('/login'); // 如果有路由管理器，可以跳转到登录页面
            } else {
                // 处理非200状态码，比如显示错误提示
                alert('注册失败，请稍后重试');
            }

        } catch (error) {
            // 处理网络错误或者服务器返回的错误信息
            console.error('Registration error:', error.response.data);
            alert('注册过程中发生错误，请稍后重试');
        }
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
            <Form
                name="registerForm"
                onFinish={onFinish}
                style={{
                    width: 400,
                    padding: 30,
                    border: '3px solid #ffffff',  // 颜色修改为绿色
                    borderRadius: 10,
                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                }}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="Username"
                        style={{ borderRadius: 5, padding: 10 }}
                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="Password"
                        style={{ borderRadius: 5, padding: 10 }}
                    />
                </Form.Item>

                <Form.Item
                    name="confirmPassword"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        { required: true, message: 'Please confirm your password!' },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject('The two passwords do not match!');
                            },
                        }),
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="Confirm Password"
                        style={{ borderRadius: 5, padding: 10 }}
                    />
                </Form.Item>

                <Form.Item
                    name="phoneNumber"
                    rules={[
                        { required: true, message: 'Please input your phone number!' },
                        { pattern: /^\d{11}$/, message: 'Please input a valid phone number!' },
                    ]}
                >
                    <Input
                        prefix={<PhoneOutlined />}
                        placeholder="Phone Number"
                        style={{ borderRadius: 5, padding: 10 }}
                    />
                </Form.Item>

                <Form.Item>
                    <Form.Item name="agreement" valuePropName="checked" noStyle>
                        <Checkbox>
                            I have read the <a href="/">agreement</a>
                        </Checkbox>
                    </Form.Item>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{ width: '100%', backgroundColor: '#52c41a' }}>
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default Register;